<template>
    <van-panel v-if="pinglists != null">
                <template #header>
                    <div class="shpj">
                        <div>商品评价({{pinglist.totalCount}})</div>
                        <div class="manyi">满意度 <span>{{pinglist.satisfaction}}%</span> <van-icon name="arrow" size="24" color="#ccc" @click="pjdfo(pingid)"/></div>
                    </div>
                </template>
                 <template #default>
                    <div class="touxiang">
                       <div class="toua">
                           <img src="">
                       </div>
                       <div class="toub">
                           <p>{{pinglists.nickName}}</p>
                           <van-rate v-model="value" readonly :count="value" size="14" gutter="2"/>
                       </div>
                    </div>
                </template>
                <template #footer>
                        <div class="pinga">
                            <div>{{pinglists.content}}</div>
                            <div class="pingtu" v-if="imageList.length">
                                <div v-for="(item,index) in imageList" :key="index">
                                    <img :src="item" @click="jubtn(index)"  v-lazy="item">
                                </div>
                            </div>
                        </div>
                </template>
            </van-panel>

</template>
<script>
import Vue from 'vue'
import http from '@/util/http'
import { Panel, Icon, Rate, ImagePreview, Lazyload } from 'vant'
Vue.use(Panel).use(Icon).use(Rate).use(Lazyload)
export default {
  data () {
    return {
      value: 0,
      pinglist: null,
      pinglists: null,
      imageList: []
    }
  },
  mounted () {
    http({
      url: `/heihei/api/comment/list?c=h5&s=20000&t=1605250016535&v=1.0&productId=${this.pingid}&pn=1&ps=1`
    }).then(res => {
      this.pinglist = res.data.data
      this.pinglists = res.data.data.pageList[0]
      if (this.pinglists !== undefined) {
        this.value = this.pinglists.productScore
        this.imageList = res.data.data.pageList[0].imageList
      }
    })
  },
  props: ['pingid'],
  methods: {
    jubtn (index) {
      ImagePreview({ images: this.imageList, startPosition: index })
    },
    pjdfo (id) {
      this.$router.push({ path: '/pages/detail/comment', query: { id: id } })
    }
  }
}
</script>
<style lang="scss" scoped>
 .van-panel{
             border-top: 10px solid #ccc;
             padding: 0 10px;
             border-bottom: 10px solid #ccc;
             .shpj{
                 display: flex;
                 height: 45px;
                 line-height: 45px;

                 div{
                     flex: 1;
                     font-size: 14px;
                     span{
                         color: #ea413c;
                         font-size: 14px;
                     }
                     .van-icon{
                         position: absolute;
                         top: 10px;
                     }
                 }
                 .manyi{
                     text-align: right;
                     padding-right: 20px;
                     position: relative;
                 }
             }
             .touxiang{
                height: 40px;
                display: flex;
                .toua{
                    width: 30px;
                    height: 30px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .toub{
                    margin-left:20px;
                    p{
                        line-height: 25px;
                        font-size: 14px;
                    }
                }
             }
             .pinga{
                 margin: 10px 0;
                 .pingtu{
                     display: flex;
                     margin: 20px 0;
                      flex-wrap: wrap;
                     div{
                         flex:0 0 33.33333%;
                         padding: 8px;
                         img{
                             width: 100%;
                             height: 96.5px;
                         }
                     }
                 }
             }
             .van-panel__footer{
                 padding: 0 0;
             }
         }
</style>
